<template>
  <div>
    <a-card :title="t['搜索']">
      <a-form :model="{}" auto-label-width>
        <a-form-item :label="t['基站名称']">
          <a-input
            v-model="stationQuery.stationName"
            style="width: fit-content"
            @keydown.enter="emit('search')"
            allow-clear
          ></a-input>
          <a-button @click="emit('search')" type="primary">{{ t["搜索"] }}</a-button>
        </a-form-item>
        <a-form-item :label="t['店名']">
          <div class="w-[180px]">
            <StoreSelector @change="emit('search')" v-model="stationQuery.filterId" />
          </div>
        </a-form-item>
        <a-form-item :label="`${t['分配']}`">
          <Allocate />
        </a-form-item>

        <div class="flex justify-between">
          <div class="flex">
            <a-button v-auth type="primary" @click="openModal">
              {{ t["新增"] }}
            </a-button>
            <a-button @click="getStationList">
              {{ t["刷新"] }}
            </a-button>
          </div>
          <span v-auth>
            <XDelete :disabled="selectedKeys.length <= 0" @ok="delByIds" />
          </span>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { delStation } from "@/api/service/station/station";
import { getStationList, selectedKeys, showStation, stationQuery } from "../data";
import { resetForm } from "../form/data";
import Allocate from "./Allocate.vue";
const emit = defineEmits(["search"]);

const t = translate("公共模块");

const delByIds = async (id: string) => {
  let ids = [];
  if (id) {
    ids = [id];
  } else {
    ids = selectedKeys.value;
  }
  await delStation(ids);
  selectedKeys.value = [];
};

const openModal = () => {
  resetForm();
  showStation.value = true;
};
</script>
